<template>
  <div>
    <mt-swipe :auto="2000">
      <mt-swipe-item>
        <router-link to="/hello">
          <img src="../../static/img/T003R720x288M000003gO5le46BY5s.jpg" alt="">
        </router-link>
      </mt-swipe-item>

      <mt-swipe-item>
        <router-link to="/hello">
          <img src="../../static/img/T003R720x288M000002E5bgF4bltSJ.jpg" alt="">
        </router-link>
      </mt-swipe-item>


      <mt-swipe-item>
        <router-link to="/hello">
          <img src="../../static/img/T003R720x288M00000018XKS3giaH7.jpg" alt="">
        </router-link>
      </mt-swipe-item>
      <mt-swipe-item>
        <router-link to="/hello">
          <img src="../../static/img/T003R720x288M0000027mkJe37vhJh.jpg" alt="">
        </router-link>
      </mt-swipe-item>
    </mt-swipe>


    <div class="content" v-bind="{style:'height:'+divHeight + 'px'}">
      <span>首页啥都没有</span> <br/>
      <span>去排行榜瞧瞧吧~~~</span><br/>
      <span>biubiu biu~</span>
    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return {
        divHeight: ''
      }
    },
    created(){
      this.divHeight = (document.body.clientHeight) - 290;
    }
  }
</script>

<style scoped>
  .mint-swipe {
    height: 200px;
  }

  .mint-swipe-item {
    height: 300px;
    width: 100%;
  }

  .mint-swipe-item img {
    width: 100%;
    height: 70%;
  }

  .content {
    background-color: rgba(0, 0, 0, .01);
    text-align: center;
  }

  .content span {
    font-family: Aharoni;
    color: rgba(0, 0, 0, .7);
    font-size: 20px;
    letter-spacing: 5px;
  }

  .content span:nth-of-type(1) {
    display: inline-block;
    margin-top: 7%;
    margin-bottom: 10px;
  }
</style>
